<template>
<div class="app-container">
  <div>
    <el-form :rules="rules" ref="targetForm" :model="temp" label-width="100px" label-position='top' size="small">
      <el-row :gutter="20">
        <el-col :span="20">
          <el-form-item label="接收人" prop="mailTo">
            <el-input v-model="temp.mailTo" placeholder="接收人"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="标题" prop="title">
            <el-input v-model="temp.title" placeholder="通知标题"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="内容" prop="content">
            <el-input type="textarea" v-model="temp.content" placeholder="通知内容" maxlength="800" :rows="8" show-word-limit></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="padding-top:20px;">
        <el-col style="text-align: right;">
          <el-button size="small" class="filter-item" type="primary" @click="saveData">发 送</el-button>
          <el-button size="small" class="filter-item" @click="closeSelf">取 消</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</div>
</template>

<script>
import {
    newMailNotice
} from '@/api/message/index'
import {
  statusOptions,
  isInnerOption
} from '@/utils/allOptions'
export default {
  name: 'newMailNotice',
  data() {
    return {
      // -------Options-----------
      statusOptions,
      isInnerOption,
      // -------Options-----------
      subSystemsOptions: [],
      temp: {
          mailTo: '',
          title: '',
          content: ''
      },
      rules: {
        mailTo: [{
          required: true,
          message: '请输入消息接收人邮箱地址',
          trigger: 'blur'
        },
        {
          min: 0,
          max: 100,
          message: '长度在 0 到 100 个字符',
          trigger: 'blur'
        },
        {
          max: 100,
          message: '最大 100 个字符',
          trigger: 'blur'
        }
        ],
        title: [{
          required: true,
          message: '请输入邮件标题',
          trigger: 'blur'
        },
        {
          min: 0,
          max: 100,
          message: '长度在 0 到 100 个字符',
          trigger: 'blur'
        },
        {
          max: 100,
          message: '最大 100 个字符',
          trigger: 'blur'
        }
        ],
        content: [{
            max: 400,
            message: '最大 400 个字符',
            trigger: 'blur'
        }]
      }
    }
  },
  methods: {
    saveData() {
      this.$refs.targetForm.validate(valid => {
        if (valid) {
            newMailNotice(this.temp).then(() => {
            this.$notify({
              title: '成功',
              message: '邮件通知已发送',
              type: 'success',
              duration: 2000
            })
            this.$emit('changeCloseDialog')
            // this.$router.push({ name: 'roleManagement' })
          })
        }
      })
    },
    closeSelf() {
      this.$emit('changeCloseDialog')
      // this.$router.push({ name: 'roleManagement' })
    }
  }
}
</script>

